<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #all{
                width: 600px;
                margin: 50px auto;
                height: 500px;
                border: 2px red solid;
                position: relative;
            }
            #all #tab li{
                list-style: none;
                float: left;
                width: 200px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 30px;
                font-weight: 700;
            }
            #all .con{
                width: 580px;
                height: 430px;
                position: absolute;
                top: 60px;
                left: 10px;
                display: none;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var tab = document.getElementById("tab");
                var lis = tab.getElementsByTagName('li');//获得标签li的数组
                var cons = document.getElementsByClassName('con');//获得下面内容div的数组
                for(var i=0;i<lis.length;i++){
                    lis[i].num = i;//给对象添加属性，赋值用于标记
                    lis[i].onmousemove = function(){
                        //div先全部隐藏
                        for(var j = 0;j<cons.length;j++){
                            cons[j].style.display = 'none';
                        }
                        //显示与鼠标所在li对应位置的div
                        cons[this.num].style.display = 'block';
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id="all">
            <ul id="tab">
                <li style="background: greenyellow;">军事</li>
                <li style="background: palevioletred;">民生</li>
                <li style="background: paleturquoise;">娱乐</li>
            </ul>
            <div class="con" style="display:block;background: greenyellow;"></div>
            <div class="con" style="background: palevioletred;"></div>
            <div class="con" style="background: paleturquoise;"></div>
        </div>
    </body>
	<script type="text/javascript">
		function Person(){
			console.log(this);
			setInterval(function(){
				// console.log(this);
				this.age ++;
			},1000)
			
		}
		let person = new Person();
	</script>
</html>
